<template>
    <div>
        <div class="xiao-header">
            <div @click="handleNO">
               <span class="icon iconfont icon-zuo"></span>
            </div>
            <div>
                消息列表
            </div>
            <!-- <div class="geng">
                <span class="icon iconfont">&#xe639;</span>
                <span class="icon iconfont">&#xe60f;</span>
            </div> -->
            <span></span>
        </div>
        <div class="xiao-main"> 
                <span @click="handleXiao">消息</span>
                <span class="active">公告</span>
        </div>
        <div class="xiao-footer">
            <dl v-for="(item,index) in list" :key="index">
                 <dd>
                     <p><b>{{item.name}}</b><span>{{item.times}}</span></p>
                     <p>{{item.title}}</p>
                 </dd>
            </dl>
        </div>
    </div>
</template>
<script>
import axios from "axios"
export default {
    data() {
        return {
            name:"Xiao",
            list:"",
        }
    },
    created(){
        this.getlist() 
    },
    methods: {
        handleNO(){
            this.$router.push("/index")
        },
        handleXiao(){
            this.$router.push("/xiao")
        },
        getlist(){
           axios.get("/gonggao").then(res=>{
               this.list=res.data.data
               console.log(this.list);
           })
        }
    },
}
</script>
<style scoped>
.xiao-footer dl dd p{
 display: flex;
 justify-content: space-between;
 text-align: center;
 align-items: center;
}
.xiao-footer dl{
    width: 90%;
    border: 1px solid #ccc;
    padding: 15px;
    margin-left: 5%;
    margin-top: 5%;
}
.xiao-header{
    display: flex;
    justify-content: space-between;
    padding: 10px;
    height: 50px;
    font-size: 20px;
    background: rgb(6, 121, 230);
 
    align-items: center;
    color: #fff;
}
.xiao-header .iconfont{
    font-size: 20px;
}
.geng{
    border: 1px solid #ccc; 
    border-radius: 30px;
    display: flex;
    justify-content: space-between;
}
.geng span{
    padding: 3px 5px;
}
.xiao-main{
    display: flex;
    justify-content: space-around;
    padding: 20px 0;

}
.active{
    color: rgb(6, 121, 230);
}
</style>